<template>
  <div>
    <div v-if="typeof reportData === 'string'">
      <vue-office-pdf :src="reportData" style="height: 80vh" />
    </div>
    <div class="tongue-report" v-else-if="typeof reportData === 'object'">
      <!-- 顶部背景图 -->
      <div class="top-background">
        <img src="@/assets/report/report.jpg" alt="背景图" class="bg-image" />

        <!-- 导航栏 -->
        <div class="nav-bar">
          <div class="nav-content">
            <div class="nav-left"></div>
            <div class="nav-center">
              <span class="nav-title">舌诊报告</span>
            </div>
            <div class="nav-right"></div>
          </div>
        </div>

        <!-- 用户信息与分数区域 -->
        <div class="top-content">
          <div class="title-area">
            <div class="main-title" :style="{ fontSize: titleFontSize }">
              {{ getMainPhysiqueName() }}
            </div>
            <div v-if="getPhysiqueTag()" class="physique-tag">
              {{ getPhysiqueTag() }}
            </div>
          </div>
          <div class="score-circle">
            <div class="score-display">
              <span class="score-number">{{ reportData.score || 0 }}</span>
              <span class="score-unit">分</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 证型说明卡片 -->
      <div class="syndrome-card">
        <div class="card-title">
          <span class="title-dot"></span>
          <span class="title-text">{{ reportData.syndrome_name || '证型说明' }}</span>
        </div>
        <div class="card-content">
          {{ reportData.syndrome_introduction || '暂无证型介绍' }}
        </div>
      </div>

      <!-- 底部内容与选项卡 -->
      <div class="bottom-content">
        <!-- 选项卡容器 -->
        <div class="tab-container">
          <div class="tab-list">
            <div
              v-for="(tab, index) in tabs"
              :key="index"
              class="tab-item"
              :class="{ active: activeTab === index }"
              @click="activeTab = index"
            >
              {{ tab.name }}
            </div>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="tab-content">
          <!-- 体质分析 -->
          <div v-if="activeTab === 0" class="tab-panel">
            <div class="content-section">
              <div class="section-header">
                <img src="@/assets/report/title.jpg" alt="标题背景" class="header-bg" />
                <span class="header-title">体质分析</span>
              </div>
              <div class="section-subtitle">
                <span class="subtitle-dot"></span>
                <span class="subtitle-text">{{ reportData.physique_name || '体质分析' }}</span>
              </div>
              <div class="section-content">
                {{ reportData.physique_analysis || '暂无体质分析内容' }}
              </div>
            </div>

            <div class="content-section">
              <div class="section-header">
                <img src="@/assets/report/title.jpg" alt="标题背景" class="header-bg" />
                <span class="header-title">体质分析</span>
              </div>
              <div class="section-subtitle">
                <span class="subtitle-dot"></span>
                <span class="subtitle-text">典型症状</span>
              </div>
              <div class="section-content">
                {{ reportData.typical_symptom || '暂无典型症状描述' }}
              </div>
            </div>
          </div>

          <!-- 体测异常 -->
          <div v-if="activeTab === 1" class="tab-panel">
            <div class="content-section">
              <div class="section-header">
                <img src="@/assets/report/title.jpg" alt="标题背景" class="header-bg" />
                <span class="header-title">舌面识别</span>
              </div>
              <div v-if="reportData.tf_detect_matches?.url" class="tongue-image-container">
                <img :src="reportData.tf_detect_matches.url" alt="舌面图片" class="tongue-image" />
              </div>
              <div v-else class="no-image"> 暂无舌面识别图片 </div>
            </div>

            <div v-for="(feature, index) in abnormalFeatures" :key="index" class="content-section">
              <div class="section-header">
                <img src="@/assets/report/title.jpg" alt="标题背景" class="header-bg" />
                <span class="header-title">{{ feature.feature_group }}</span>
              </div>
              <div class="section-subtitle">
                <span class="subtitle-dot"></span>
                <span class="subtitle-text">{{ feature.feature_name }}</span>
              </div>
              <div class="section-content">
                {{ feature.feature_interpret }}
              </div>
            </div>
          </div>

          <!-- 调理建议 -->
          <div v-if="activeTab === 2" class="tab-panel">
            <div v-for="(categoryKey, index) in Object.keys(reportData.advices || {})" :key="index">
              <div
                v-if="reportData.advices[categoryKey] && reportData.advices[categoryKey].length > 0"
              >
                <div class="content-section">
                  <div class="section-header">
                    <img src="@/assets/report/title.jpg" alt="标题背景" class="header-bg" />
                    <span class="header-title">{{ getCategoryTitle(categoryKey) }}</span>
                  </div>
                  <div
                    v-for="(advice, adviceIndex) in reportData.advices[categoryKey]"
                    :key="adviceIndex"
                  >
                    <div v-if="advice.title" class="section-subtitle">
                      <span class="subtitle-dot"></span>
                      <span class="subtitle-text">{{ advice.title }}</span>
                    </div>
                    <div class="section-content">
                      {{ advice.advice }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import VueOfficePdf from '@vue-office/pdf/lib/v3/vue-office-pdf.mjs'

interface TongueReportData {
  physique_name?: string
  score?: number
  syndrome_name?: string
  syndrome_introduction?: string
  physique_analysis?: string
  typical_symptom?: string
  tf_detect_matches?: {
    url?: string
  }
  features?: Array<{
    feature_group: string
    feature_name: string
    feature_interpret: string
    feature_situation: string
  }>
  advices?: {
    [key: string]: Array<{
      title: string
      advice: string
    }>
  }
}

const props = defineProps<{
  reportData: TongueReportData
}>()

// 选项卡数据
const tabs = [{ name: '体质分析' }, { name: '体测异常' }, { name: '调理建议' }]

const activeTab = ref(0)

// 获取主要体质名称（、号前的部分）
const getMainPhysiqueName = () => {
  const name = props.reportData.physique_name || '未知体质'
  if (name.includes('、')) {
    return name.split('、')[0]
  }
  return name
}

// 获取体质标签（、号后的部分，前面加上"兼夹"）
const getPhysiqueTag = () => {
  const name = props.reportData.physique_name || ''
  if (name.includes('、')) {
    const secondPart = name.split('、')[1]
    if (secondPart) {
      return `兼夹${secondPart}`
    }
  }
  return ''
}

// 动态计算标题字体大小
const titleFontSize = computed(() => {
  const name = getMainPhysiqueName()
  if (name.length <= 4) {
    return '36px'
  } else if (name.length >= 9) {
    return '24px'
  } else {
    // 4-9字之间线性插值
    const ratio = (name.length - 4) / (9 - 4)
    const fontSize = 36 - (36 - 24) * ratio
    return `${Math.round(fontSize)}px`
  }
})

// 获取异常特征
const abnormalFeatures = computed(() => {
  const features = props.reportData.features || []
  return features.filter((feature) => feature.feature_situation === '异常')
})

// 获取分类标题
const getCategoryTitle = (categoryKey: string) => {
  const titleMap: { [key: string]: string } = {
    food: '饮食建议',
    sport: '运动建议',
    music: '音乐建议',
    sleep: '睡眠建议',
    treatment: '治疗建议'
  }
  return titleMap[categoryKey] || categoryKey
}
</script>

<style lang="scss" scoped>
.tongue-report {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-y: auto;
  position: relative;
}

.top-background {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;

  .bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  z-index: 10;

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 15px;

    .nav-left,
    .nav-right {
      width: 40px;
    }

    .nav-center {
      flex: 1;
      text-align: center;

      .nav-title {
        color: white;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}

.top-content {
  position: absolute;
  bottom: 30px;
  left: 15px;
  right: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .title-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .main-title {
      color: #edf8fb;
      font-weight: bold;
      line-height: 1.2;
      margin-bottom: 8px;
      margin-top: 0;
    }

    .physique-tag {
      display: inline-block;
      background: #ccdeff;
      color: #176aff;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      align-self: flex-start;
    }
  }

  .score-circle {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    .score-display {
      text-align: center;

      .score-number {
        font-size: 48px;
        font-weight: bold;
        color: #176aff;
        line-height: 1;
      }

      .score-unit {
        font-size: 16px;
        color: #176aff;
        margin-left: 2px;
      }
    }
  }
}

.syndrome-card {
  margin: 15px;
  background: white;
  border-radius: 16px;
  padding: 15px;

  .card-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .title-dot {
      width: 6px;
      height: 6px;
      background: #176aff;
      border-radius: 50%;
      margin-right: 8px;
    }

    .title-text {
      color: #176aff;
      font-weight: bold;
      font-size: 16px;
    }
  }

  .card-content {
    color: #9ca4a3;
    font-size: 14px;
    line-height: 1.6;
    max-height: 120px;
    overflow-y: auto;
  }
}

.bottom-content {
  .tab-container {
    background: white;
    border-radius: 16px 16px 0 0;
    margin: 0 15px;

    .tab-list {
      display: flex;

      .tab-item {
        flex: 1;
        text-align: center;
        padding: 12px 0;
        cursor: pointer;
        transition: all 0.3s ease;
        background: white;
        color: #c4c4c4;
        border-radius: 16px 16px 0 0;
        font-size: 14px;

        &.active {
          background: #176aff;
          color: white;
          font-weight: bold;
        }

        &:first-child {
          border-radius: 16px 0 0 0;
        }

        &:last-child {
          border-radius: 0 16px 0 0;
        }

        &:first-child:last-child {
          border-radius: 16px 16px 0 0;
        }
      }
    }
  }

  .tab-content {
    background: #ededed;
    margin: 0 15px;
    min-height: 300px;
    padding: 15px 0;

    .tab-panel {
      .content-section {
        background: white;
        border-radius: 16px;
        margin: 0 15px 15px;
        overflow: hidden;

        .section-header {
          position: relative;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-top: 15px;
          margin-left: 15px;

          .header-bg {
            position: absolute;
            width: 164px;
            height: 24px;
            object-fit: cover;
            left: 0;
          }

          .header-title {
            position: relative;
            color: white;
            font-weight: bold;
            font-size: 16px;
            z-index: 1;
            padding-left: 25px;
          }
        }

        .section-subtitle {
          display: flex;
          align-items: center;
          padding: 12px 15px 8px;

          .subtitle-dot {
            width: 5px;
            height: 5px;
            background: #176aff;
            border-radius: 50%;
            margin-right: 6px;
          }

          .subtitle-text {
            color: #176aff;
            font-weight: bold;
            font-size: 14px;
          }
        }

        .section-content {
          padding: 0 15px 15px;
          color: #a8a8a8;
          line-height: 1.6;
          font-size: 13px;
        }

        .tongue-image-container {
          padding: 15px;
          text-align: center;

          .tongue-image {
            width: 100%;
            max-width: 280px;
            height: auto;
            border-radius: 8px;
            object-fit: cover;
          }
        }

        .no-image {
          padding: 40px 15px;
          text-align: center;
          color: #a8a8a8;
          font-size: 14px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .top-content {
    flex-direction: row;
    align-items: flex-start;

    .title-area {
      margin-bottom: 0;
      margin-right: 15px;

      .main-title {
        font-size: 28px !important;
      }
    }

    .score-circle {
      width: 100px;
      height: 100px;
      flex-shrink: 0;

      .score-display {
        .score-number {
          font-size: 36px;
        }

        .score-unit {
          font-size: 14px;
        }
      }
    }
  }

  .syndrome-card {
    margin: 10px;
    padding: 12px;
  }

  .bottom-content {
    .tab-container {
      margin: 0 10px;
    }

    .tab-content {
      margin: 0 10px;

      .tab-panel .content-section {
        margin: 0 10px 10px;

        .tongue-image-container .tongue-image {
          max-width: 240px;
        }
      }
    }
  }
}
</style>
